<template>
  <div style="background-color:#FFFFFF">
    <el-breadcrumb separator="/" style="padding:20px 0">
      <el-breadcrumb-item :to="{ path: '/' }"></el-breadcrumb-item>
      <el-breadcrumb-item>酒店搜索</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row :gutter="5" style="padding: 15px">
      <el-col :span="24"
        ><div class="grid-content ">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="城市">
              <el-input
                v-model="searchForm.cityName"
                :placeholder="city"
              ></el-input>
            </el-form-item>

            <el-form-item label="住房日期">
              <el-col :span="10">
                <el-date-picker
                  type="date"
                  placeholder="入住日期"
                  v-model="searchForm.inDate"
                  style="width: 100%;"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2" style="padding-left:15px"
                >至</el-col
              >
              <el-col :span="10">
                <el-date-picker
                  type="date"
                  placeholder="退房日期"
                  v-model="searchForm.outDate"
                  style="width: 100%;"
                ></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="searchHotel"
                circle
              ></el-button>
            </el-form-item>
          </el-form></div
      ></el-col>
      <div style="padding-top:5px">
        <span>雨纷纷</span>
        <el-divider direction="vertical"></el-divider>
        <span>旧故里</span>
        <el-divider direction="vertical"></el-divider>
        <span>草木深</span>
      </div>
    </el-row>

    <el-row
      :gutter="20"
      v-if="hotelMsg.hotelList != undefined"
      style="background-color:#FFFFFF; padding: 0 10px;"
    >
      <el-col :span="8" v-for="item in hotelMsg.hotelList" :key="item.hotelId">
        <el-badge
          :value="item.starName"
          style="position: float:left"
          class="item"
        >
          <!-- 跳转酒店详情页 -->
          <nuxt-link
            :to="
              `/hotel/hotel-detail?hotelId=${item.hotelId}`
            "
          >
            <el-card
              :body-style="{ padding: '0px' }"
              shadow="hover"
              class="card_item"
              style="border:solid 1px rgba(0, 0, 0, 0.1);border-radius: 4px"
            >
              <img :src="item.picture" class="image" />
              <div style="padding: 14px; height: 80px">
                <span>{{ item.chineseName }}</span>
                <div class="bottom clearfix">
                  <time class="time">{{ item.address }}</time>
                  <el-button type="text" class="button"
                    >约 ￥ {{ item.price }}</el-button
                  >
                </div>
              </div>
            </el-card>
          </nuxt-link>
        </el-badge>
      </el-col>
    </el-row>
    <!-- 为搜索到合适的数据 -->

    <!-- 分页栏 -->
    <Pagination
      :data="hotelMsg.hotelList"
      :count="hotelMsg.count"
      :searchParams="searchForm"
      @doSearch="doSearch($event)"
    />
  </div>
</template>

<script>
import qs from "qs";
import Pagination from "@/components/pagination.vue";

export default {
  components: {
    Pagination
  },
  props: {
    // 接受父组件传来的参数
    // 城市编号
    citycode: {
      type: String,
      default: ""
    },
    city: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      // 搜索条件
      searchForm: {
        // 获取page页数据
        page: 0,
        // 城市名称
        cityName: "",
        inDate: "",
        outDate: "",
        // 排序规则
        sortKey: "recommend",
        star: null,
        minPrice: 0,
        maxPrice: 100000,
        poiKey: "",
        poiCode: "",
        longitude: "",
        latitude: "",
        // 每页数据,默认 21
        limit: 21,
        // 关键字搜索
        keyWords: ""
      },
      // 酒店信息
      hotelMsg: []
    };
  },
  mounted() {
    // 得到今天日期
    this.searchForm.inDate = this.getMyDate(0);
    // 得到明天的日期
    this.searchForm.outDate = this.getMyDate(-1);
    // 默认城市为长沙
    this.searchForm.cityName = "长沙";
    // 初始化搜索
    this.searchHotel();
  },
  methods: {
    // 搜索酒店
    searchHotel() {
      var { page, cityName, sortKey, inDate, outDate, limit } = this.searchForm;
      // 日期格式化
      this.searchForm.inDate = this.dateFormat(inDate);
      this.searchForm.outDate = this.dateFormat(outDate);
      // 搜索酒店信息
      var that = this;
      let data = qs.stringify({
        ...this.searchForm
      });
      this.$axios({
        url:
          "https://route.showapi.com/1653-1?showapi_appid=619461&showapi_sign=80d8f69af9f44768b38cdd075c6a2746",
        method: "POST",
        data
      }).then(res => {
        that.hotelMsg = res.data.showapi_res_body.data;
        console.log(that.hotelMsg);
      });
      // 加载效果
      const loading = this.$loading({
        lock: true,
        text: "拼命加载中"
      });
      setTimeout(() => {
        loading.close();
      }, 1000);
    },

    // 日期格式化
    dateFormat(dateData) {
      var date = new Date(dateData);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      const time = y + "-" + m + "-" + d;
      return time;
    },

    // 前后日期
    getMyDate(date) {
      var num = date;
      let n = num;
      let d = new Date();
      let year = d.getFullYear();
      let mon = d.getMonth() + 1;
      let day = d.getDate();
      if (day <= n) {
        if (mon > 1) {
          mon = mon - 1;
        } else {
          year = year - 1;
          mon = 12;
        }
      }
      d.setDate(d.getDate() - n);
      year = d.getFullYear();
      mon = d.getMonth() + 1;
      day = d.getDate();
      let s =
        year +
        "-" +
        (mon < 10 ? "0" + mon : mon) +
        "-" +
        (day < 10 ? "0" + day : day);
      return s;
    },

    // 刷新搜索
    doSearch(searchParams) {
      // 更新数据
      this.searchForm = searchParams;
      this.searchHotel();
    }
  }
};
</script>

<style lang="less">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  // width: 100%;
  width: 380px;
  height: 250px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.card_item {
  // background-color: red;
  margin: 15px 0;
}

.item {
  margin-top: 10px;
}
</style>
